<script setup lang="ts">
import useHomeStore from '~/store/home'
import {storeToRefs} from "pinia";
import type {ICategorys} from "~/types/home";

const homeStore = useHomeStore()
homeStore.fetchHomeData('oppo')
const {banners, categorys} = storeToRefs(homeStore)

// console.log("banners", banners.value)
// console.log("categorys", categorys.value)
const handleItemClick = (item: ICategorys) => {
  console.log("item", item)
  return navigateTo({
    path: 'oppo-detail',
    query: {
      type: item.type
    }
  })
}


</script>

<template>
  <div class="home">
    <div class="wrapper content">
      <swiper :banners="banners"/>
      <tab-category :categorys="categorys" @item-click="handleItemClick"/>
      <template v-for="category in categorys" :key="category.id">
        <section-title :title="category?.title"/>
        <!-- productDetailss 返回的单词就是错的。。。  -->
        <grid-view :productDetailss="category?.productDetailss" :category-url="category?.url"/>
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
